<template>
  <div style="display: inline">
    <el-button @click="useDelivery" type="info"  class="mgr10 mgb10">修改快递单</el-button>
    <el-dialog title="修改快递单" :visible.sync="dialog">
      <el-form :model="deliveryForm" label-width="150px" :rules="rules" ref="deliveryForm">
        <el-form-item label="选择快递"  prop="deliveryType">
          <el-select v-model="deliveryForm.deliveryType" filterable>
            <el-option-group
              v-for="group in expressGroupOptions"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.company_name"
                :value="item.type">
              </el-option>
            </el-option-group>
          </el-select>
<!--          <div class="tips" v-if="deliveryForm.deliveryType === 'FWSY' || deliveryForm.deliveryType === 'SFEXPRESS'">-->
<!--            【顺丰和丰网请输入单号 : 收件人或寄件人手机号后四位。例如：123456789:1234】-->
<!--          </div>-->
        </el-form-item>
        <el-form-item label="快递单号" prop="deliveryNo">
          <el-input v-model.trim.number="deliveryForm.deliveryNo" placeholder="请填写快递单号"></el-input>
        </el-form-item>
        <el-form-item
          label="手机尾号"
          prop="phone"
          v-if="deliveryForm.deliveryType === 'FWSY' || deliveryForm.deliveryType === 'SFEXPRESS'"
        >
          <el-input
            v-model.trim="deliveryForm.phone"
            placeholder="请填写收件人或寄件人手机号后四位"
            maxlength="4"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteRow">删 除</el-button>
        <el-button type="primary" @click="submitForm" :disabled="isChange()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {deepCopy} from "@/utils";
import {deleteStickerOrder, deliveryOrder, editDelivery, getExpressList, ignoreOrder} from "@/api/order";
import expressCompanyMixin from "@/views/order/mixin/expressCompany";

export default {
  name: "DeliveryButton",
  mixins: [expressCompanyMixin],
  props:{
    orderId:{
      type: String,
      required: true,
    },
    deliveryType:{
      type: String,
      require: true,
    },
    deliveryNo:{
      type: String,
      required: true,
    },
    phone:{
      type: String,
      default: '',
    },
    disable:{
      default: false,
    }
  },
  computed:{
    groupOptions(){
      const options = [
        {
          label: '常用',
          options: []
        },
        {
          label: '其他',
          options: [],
        }
      ];
      this.options.forEach(item=>{
        if(item.hot){
          options[0].options.push(item)
        }else{
          options[1].options.push(item)
        }
      })
      if(options[0].options.length === 0){
        options[1].label = ''
      }
      return options;
    }
  },
  created() {
    // this.getOptions()
    this.deliveryForm.orderId = this.orderId;
    this.deliveryForm.deliveryType = this.deliveryType;
    this.deliveryForm.deliveryNo = this.deliveryNo;
    this.deliveryForm.phone = this.phone;
    this.originForm = deepCopy(this.deliveryForm)
  },
  data(){
    return {
      dialog : false,
      loading: false,
      deliveryForm:{
        orderId: '', // 订单号
        deliveryType: '', // 快递公司
        deliveryNo: '', // 快递单号
        phone:'',
      },
      originForm:{

      },
      options: [],
      rules:{
        deliveryType:[
          { required: true, message: '请选择快递公司', trigger: 'change' }
        ],
        deliveryNo:[
          { required: true, message: '请填写快递单号', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '顺丰和丰网的快递，请输入收件人或寄件人手机号码的后四位数字', trigger: 'blur' },
          // { pattern: /^\d(4)$/, message: '顺丰和丰网的快递，请输入收件人或寄件人手机号码的后四位数字', trigger: 'blur' },
          { pattern: /^\d{4}/, message: '顺丰和丰网的快递，请输入收件人或寄件人手机号码的后四位数字'},
        ],
      }
    };
  },
  methods:{
    getOptions(){
      getExpressList()
        .then(res=>{
          this.options = res.data
        })
    },
    useDelivery(){
      this.dialog = true;
    },
    submitForm(){
      this.$refs.deliveryForm.validate(valid =>{
        if(valid){

          this.$confirm('', '确认修改当前快递单？', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            cancelButtonClass: '取消'
          })
            .then(res=>{
              // 点击了确定
              this.loading = true
              const postData = deepCopy(this.deliveryForm)
              editDelivery(postData)
                .then(res=>{
                  if(res.error === 0){
                    this.$successMessage(res.message)
                    this.dialog = false
                    this.$emit('changeOrder',true)
                  }else{
                    this.$errorMessage(res.message)
                  }
                })
            })
            .catch(res=>{
              // 点击了取消
            });
        }
      })
    },
    // 删除快递单
    deleteRow(){
      this.$confirm('删除后订单将重新变为未处理状态，请重新处理', '确认删除当前快递单？', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonClass: '取消'
      })
        .then(res=>{
          // 点击了确定
          deleteStickerOrder(this.orderId)
            .then(res=>{
              if(res.error === 0){
                this.$successMessage(res.message)
                this.dialog = false
                this.$emit('changeOrder',true)
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(res=>{
          // 点击了取消
        });
    },
    // 判断是否有改变数据
    isChange(){
      return JSON.stringify(this.deliveryForm) === JSON.stringify(this.originForm)
    }
  }
}
</script>

<style scoped>

</style>
